<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
      function startRead() {
        var fileList = document.getElementById('filesToUpload').files,
            items  = document.getElementById('progress-items');
            items.innerHTML = '';
        for(var i = 0; i < fileList.length; i++){
           var oDiv = document.createElement('div');
           oDiv.setAttribute('class', 'progress');
           oDiv.innerHTML = '<div class="progress-wrapper"><div id="progressBar_' + (i+1) + '" class="progress-bar"></div></div><div id="rate_' +(i+1) + '" class="rate"></div>';
           items.appendChild(oDiv);
        }
      }
      function uploadFiles() {
        var fileList = document.getElementById('filesToUpload').files;
         
        for(var i = 0; i < fileList.length; i++){
            var fd = new FormData();
            fd.append("filesToUpload", fileList[i]);
            var xhr = new XMLHttpRequest();
            xhr.id = xhr.upload.id = i+1;
            xhr.upload.addEventListener("progress", uploadProgress, false);
            xhr.addEventListener("load", uploadCompleted, false);
            xhr.addEventListener("error", uploadFailed, false);
            xhr.addEventListener("abort", uploadCanceled, false);
            xhr.open("POST", "upload.php");
            xhr.send(fd);
        }
      }
      function uploadProgress(evt) {
        console.log(evt);
        if (evt.lengthComputable) {
          var currentCompleted = Math.round(evt.loaded * 100 / evt.total);
          //console.log(currentCompleted.toString() + '%');
          document.getElementById('rate_'+evt.currentTarget.id).innerHTML = currentCompleted.toString() + "%";
          document.getElementById('progressBar_'+evt.currentTarget.id).style.width = currentCompleted.toString() + "%";
        }
      }
      function uploadCompleted(evt) {
        console.log("Completed!");
      }
      function uploadFailed(evt) {
        console.log("Failed!");
      }
      function uploadCanceled(evt) {
        console.log("Canceled!");
      }
</script>
<style>
     .content-wrapper{
       border:1px solid gray;
       height:600px;
       width:600px;
       margin:0 auto;
       margin-top:20px;
     }
     .form-wrapper{
       margin: 20px;
     }
     .progress{
       height:30px;
       margin-left:10px;
     }
     .progress-bar{
       height:20px;
       background:red;
       width:0%
     }
     .progress-wrapper{
       width: 500px;
       height: 20px;
       border: 1px solid gray;
       float:left
     }
     .rate{
       float:left;
     }
</style>
</head>
<body>
<div class="content-wrapper">
    <div class="form-wrapper">
      <form enctype="multipart/form-data" method="post" action="#">
      <label for="filesToUpload">You can select multiple Files to upload:</label><br />
      <input type="file" name="filesToUpload" id="filesToUpload" onchange="startRead()" multiple />
      <input type="button" onclick="uploadFiles()" value="Upload" />
     </form>
    </div> 
     
      <br />
      <br />
      <br />
    <div id="progress-items">
    </div>
 </div>
</body>
</html>